<template>
<div class="product-add">
    <el-form size="small" ref="form" :model="form" label-width="100px">
      <div class="common-form">{{$t('plus.product_recommendation')}}</div>
      <el-form-item :label="$t('plus.product_recommendation')">
        <el-radio-group v-model="form.isRecommend">
          <el-radio :label="0">{{$t('plus.off')}}</el-radio>
          <el-radio :label="1">{{$t('plus.on')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('plus.module_name')" :rules="[{  required: true,  message: ' '}]" prop="name">
        <el-input v-model="form.name" :placeholder="$t('plus.input_module_name')" class="max-w460"
          :disabled="form.isRecommend == 0 ? true : false"></el-input>
      </el-form-item>
      <el-form-item :label="$t('plus.display_position')">
        <el-checkbox-group v-model="form.location">
          <el-checkbox v-for="(item, index) in all_type" :label="item.value" :key="index"
            :disabled="form.isRecommend == 0 ? true : false">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="$t('plus.recommend_product')">
        <el-radio-group v-model="form.choice">
          <el-radio :label="0" :disabled="form.isRecommend == 0 ? true : false">{{$t('plus.select_by_condition')}}</el-radio>
          <el-radio :label="1" :disabled="form.isRecommend == 0 ? true : false">{{$t('plus.custom_select')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" v-if="form.choice == 0">
        <el-select v-model="type" placeholder="" :disabled="form.isRecommend == 0 ? true : false">
          <el-option v-for="(item, index) in showType" :label="item.name" :value="item.value" :key="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="" v-if="form.choice == 0">
        <el-select v-model="num" placeholder="" :disabled="form.isRecommend == 0 ? true : false">
          <el-option v-for="(item, index) in showNum" :label="item.name" :value="item.value" :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item size="small" label="" v-if="form.choice == 1">
          <el-button size="small" icon="Plus" @click="addClick">{{$t('plus.add_product')}}</el-button>
        </el-form-item>
        <el-form-item  label="" v-if="form.choice == 1">
        <div class="flex-1">
          <el-table size="large" :data="tableData" border>
            <el-table-column :label="$t('plus.image')" width="60">
              <template #default="scope">
                <div class="product-info">
                  <div class="pic"><img :width="30" :height="30" v-img-url="scope.row.productImage" /></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="productName" :label="$t('plus.gift_product')"></el-table-column>
            <el-table-column :label="$t('plus.sort')" width="100">
              <template #default="scope">
                <el-input v-model="scope.row.sort" type="number" :disabled="form.isRecommend == 0 ? true : false">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right" :label="$t('plus.action')" width="120">
              <template #default="scope">
                <el-button @click="deleteClick(scope.row)" type="text" size="small"
                  :disabled="form.isRecommend == 0 ? true : false">{{$t('plus.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" size="small" @click="onSubmit" :loading="loading">{{$t('plus.submit')}}</el-button>
      </div>
    </el-form>
    <!--选择商品-->
    <Product :isProduct="isProduct" @closeDialog="closeProductDialogFunc($event)"></Product>
  </div>
</template>

<script>
import RecommendApi from '@/api/recommend.js';
import Product from '@/components/product/Product.vue';
export default {
  components: {
    /*商品选择*/
    Product
  },
  data() {
    return {
      form: {
        isRecommend: 0,
        choice: 0,
        location: [],
        name: ''
      },
      all_type: [{
        name: $t("plus.shopping_cart"),
        value: 10
      }, {
        name: $t("plus.payment_success_page"),
        value: 20
      }],
      showType: [{
        name: $t("plus.sort_by_sales"),
        value: 10
      }, {
        name: $t("plus.sort_by_add_time"),
        value: 20
      }, {
        name: $t("plus.sort_by_popularity"),
        value: 30
      }],
      showNum: [{
        name: $t("plus.show_top_20"),
        value: 20
      }, {
        name: $t("plus.show_top_30"),
        value: 30
      }, {
        name: $t("plus.show_top_50"),
        value: 50
      }],
      type: 10,
      num: 20,
      tableData: [],
      productArr: [],
      isProduct: false,
      Data: [],
      loading: false
    };
  },
  created() {
    /*获取数据*/
    this.getData();
  },
  methods: {
    /*获取当前数据*/
    getData() {
      let self = this;
      let Params = {};
      RecommendApi.getData(Params, true).then(res => {
        self.loading = false;
        self.form = res.data;
        self.form.isRecommend = parseInt(res.data.isRecommend);
        self.form.choice = parseInt(res.data.choice);
        // 转成整数，兼容组件
        for (let i = 0; i < self.form.location.length; i++) {
          self.$set(self.form.location, i, parseInt(self.form.location[i]));
        }
        if (self.form.choice == 1) {
          res.data.product.forEach((item, index) => {
            self.productArr.push(item.productId);
          });
          self.tableData = res.data.product;
        } else {
          self.type = parseInt(self.form.type);
          self.num = parseInt(self.form.num);
        }
        self.form.isRecommend = parseInt(self.form.isRecommend);
        self.form.choice = parseInt(self.form.choice);
      }).catch(error => {
        self.loading = false;
      });
    },
    /**
     * 保存数据
     */
    onSubmit() {
      let self = this;
      let params = self.form;
      if (params.choice == 1) {
        params.product = self.tableData;
      } else {
        params.type = self.type;
        params.num = self.num;
      }
      if (!self.checkData(params)) {
        return false;
      }
      self.loading = true;
      RecommendApi.saveData(params, true).then(data => {
        self.loading = false;
        if (data.code == 1) {
          ElMessage({
            message: $t("plus.save_success"),
            type: 'success'
          });
          self.getData();
        } else {
          self.loading = false;
        }
      }).catch(error => {
        self.loading = false;
      });
    },
    /*关闭弹窗*/
    closeProductDialogFunc(e) {
      this.isProduct = e.openDialog;
      if (e.type == 'success') {
        if (this.productArr.indexOf(e.params.productId) > -1) {
          ElMessage({
            message: $t("plus.product_selected1"),
            type: 'error'
          });
          return false;
        }
        let param = {};
        param.productId = e.params.productId;
        param.productName = e.params.productName;
        param.productImage = e.params.imagePath;
        param.sort = 1;
        this.tableData.push(param);
        this.productArr.push(e.params.productId);
      }
    },
    /*添加商品*/
    addClick() {
      this.isProduct = true;
    },
    /*删除商品*/
    deleteClick(e) {
      let index = this.productArr.indexOf(e.productId);
      console.log(index);
      this.productArr.splice(index, 1);
      this.tableData.splice(index, 1);
    },
    /*数据验证*/
    checkData(param) {
      if (!param.name) {
        return false;
      }
      if (param.location.length == 0) {
        ElMessage({
          message: $t("plus.select_display_position"),
          type: 'error'
        });
        return false;
      }
      if (param.choice == 1 && param.product.length == 0) {
        ElMessage({
          message: $t("plus.please_add_product"),
          type: 'error'
        });
        return false;
      }
      return true;
    }
  }
};
</script>

